<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getMationInfoAPI } from '@/api/search/index'
import { HttpCodeEnum } from '@packages/share/enums'
import { Cpu, FullScreen, Search } from '@element-plus/icons-vue'

const props = defineProps({
  id: { type: String, required: true }
})
// 全屏显示
const dialogVisible = ref(false)
const dialogContent =ref()
const logs = ref([
  {
    id: 1,
    port: '22',
    protocol: 'tcp/ftp',
    app: 'Pure-FTPd',
    time: '2024/06/25',
    tabActive: '',
    isFullScren: false,
    tabs: [
      {
        name: 'Banner',
        data: `
        HTTP/1.1 200 OKXGPT解读
        Cache-Control: private
        Content-Type: text/html; charset=utf-8
        Server: Microsoff-lIS/1 0.0
        Set-Cookie: ASP.NET_Sessionld=mgfu430ga1 ezwoezcpdlbqq: path=/; HttpOnly; Same
        Site=Lax
        X-AspNet-Version: 4.0.30319
        X-Powered-By: ASP.NET
        Date: Tue, 04 Jun 2024 08:17:14 GMT
        Content-Lenqth: 7572
      `
      },
      { name: '网站正文', data: '' }
    ]
  }
])

// 全屏
const changeFullscreen = (item: any) => {
  const activeTab = item.tabs.find((tab: { name: any }) => tab.name === item.tabActive)
  dialogVisible.value = true
  dialogContent.value=activeTab.data
}

// XGPT
const xgpt = () => { }

const getInfo = (id: string) => {
  getMationInfoAPI(id).then((res) => {
    let { code, rows } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      rows.map((ele: any) => {
        if (ele.tabs.length) ele.tabActive = ele.tabs[0].name
      })
      logs.value = rows
    }
  })
}

onMounted(() => {
  getInfo(props.id)
})
</script>
<template>
  <div class="info-con" v-for="item in logs" :key="item.id">
    <div class="left">
      <div class="tags">
        <jm-tag class="tags" type="info">
          <div class="flex-items">
            <jm-icon>
              <Cpu />
            </jm-icon>
            <span>{{ item.port }}</span>
          </div>
        </jm-tag>
        <jm-tag class="tags" type="info">{{ item.protocol }}</jm-tag>
      </div>
      <div class="xgpt">
        <div class="app">
          <span class="label">应用：</span>
          <span>{{ item.app }}</span>
          <jm-button @click="xgpt(item)" round size="small" class="xgpt-btn">XGPT解读</jm-button>
        </div>
        <div class="time">
          <span class="label">末次发现时间：</span>
          <span>{{ item.time }}</span>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="view">
        <div class="fullScreenIcon" @click="changeFullscreen(item)">
          <jm-icon>
            <FullScreen />
          </jm-icon>
        </div>
        <jm-tabs v-model="item.tabActive">
          <jm-tab-pane :label="item2.name" :name="item2.name" v-for="(item2, index2) in item.tabs" :key="index2">
            <pre class="view-con">
              <jm-button @click="xgpt(item2)" round size="small" class="view-btn">XGPT解读</jm-button>
              {{ item2.data }}
            </pre>
          </jm-tab-pane>
        </jm-tabs>
      </div>
    </div>
        <!-- 全屏显示 -->
      <jm-dialog v-model="dialogVisible" :modal="true">
      <template #header>
        <p v-html="dialogContent"></p>
      </template>
    </jm-dialog>
  </div>
</template>
<style scoped lang="scss">
.flex {
  display: flex;
}

.search {
  margin-bottom: 1.25rem;

  .input {
    flex: 1;
    margin-right: 0.625rem;
  }
}

.tags {
  margin-left: 0.3125rem;
}

.info-con {
  display: flex;
  height: 17.5rem;
  padding: 0.625rem;
  margin-bottom: 1.25rem;
  border: var(--el-border);

  .left {
    width: 20%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .xgpt {
      flex: 1;
      padding: 1.25rem;
      margin-top: 0.625rem;
      background-color: var(--el-color-info-light-9);
      color: var(--el-text-color-regular);

      .app {
        margin-bottom: 1.25rem;

        .xgpt-btn {
          margin-left: 0.625rem;
        }
      }

      .label {
        display: inline-block;
        width: 7.5rem;
      }
    }
  }

  .right {
    width: 80%;
    margin-left: 0.625rem;

    .view {
      position: relative;
      height: 100%;
      border: var(--el-border);
      border-radius: 0.3125rem;

      .fullScreenIcon {
        position: absolute;
        top: 0.625rem;
        right: 0.625rem;
        cursor: pointer;
        z-index: 2;
      }

      .view-con {
        height: 100%;
        overflow-y: auto;
        white-space: pre-wrap;
        word-break: keep-all;
        padding-left: 1em; 

        &::-webkit-scrollbar-track-piece {
          background-color: var(--el-fill-color-blank);
        }

        &::-webkit-scrollbar {
          width: 0.375rem;
          width: 0.375rem;
        }

        &::-webkit-scrollbar-thumb {
          border-radius: 1.25rem;
          background-color: var(--el-text-color-disabled);
        }

        .view-btn {
          position: absolute;
          top: 0%;
          right: 1.25rem;
        }
      }
    }
  }
}

:deep(.el-tabs.el-tabs--top) {
  height: 100%;

  .el-tabs__content {
    height: calc(100% - 3.4375rem);

    .el-tab-pane {
      height: 100%;
    }
  }

  .el-tabs__header {
    .el-tabs__nav-wrap {
      padding: 0 0.625rem;
    }
  }
}
</style>
